<template>
  <div class="main">
    <header-search
      :query-obj="queryObj"
      :show-list="showList"
      :status-list="statusList"
      @handleSearch="handleSearch"
      @dialogOpen="dialogOpen"
    />
    <main-component
      ref="main"
      :table-data="tableData"
      :table-header="tableHeader"
      :loading="loading"
      :show-select-check-box="true"
      :ids.sync="ids"
      :query-obj="queryObj"
      :buttons-obj="buttonsObj"
      :total-size="totalSize"
      @queryData="queryData"
      @handleCommand="handleCommand"
      @updateStatusMuilty="updateStatusMuilty"
      @deleteDataMuilty="deleteDataMuilty"
      @toggleSelection="toggleSelection"
    >
      <template v-slot:showIs="{ scope }">
        {{ scope.row.showIs === 0 ? "是" : "否" }}
      </template>
    </main-component>
    <my-dialog
      ref="dialog"
      :form-obj="formObj"
      :rules="rules"
      :dialog-obj="dialogObj"
      :show-list="showList"
      @saveInfo="saveInfo"
      @dialogClose="dialogClose"
      @changeNum="changeNum"
    />
  </div>
</template>
<script>
import mixinCommon from '@/components/common/mixin-common.js'
import mixinData from './component/data.js'
import mixinMethods from './component/methods.js'
import myDialog from './component/dialog'
import headerSearch from './component/header-search'
export default {
  name: 'Category',
  components: { myDialog, headerSearch },
  mixins: [mixinCommon, mixinData, mixinMethods],
  mounted() {
    this.queryData()
  }
}
</script>
